<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="活动名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
    </el-form>
    <h1>{{ num }}</h1>
    <el-button @click="addNum">加一</el-button>
    <el-button @click="montionAdd()">montaion 加1</el-button>
    <el-button @click="actionAdd()">action 加1</el-button>
  </div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  data () {
    return {
      form: {
        name: ''
      }
    }
  },
  methods: {
    addNum () {
      this.$store.state.num++
    },
    ...mapMutations(['stateChange']),
    ...mapActions(['getNewNum']),
    montionAdd () {
      console.log(this.$store.state.num)
      const num = this.$store.state.num + 1
      this.stateChange(num)
    },
    actionAdd () {
      const num = this.$store.state.num + 1
      this.getNewNum(num)
    }
  },
  watch: {
    num: {
      handler: function (val, oldVal) {
        console.log(val, oldVal)
      },
      immediate: true // 该属性设定该回调将会在侦听开始之后被立即调用
    }
  },
  computed: {
    ...mapState(['num'])
  }
}
</script>
